<template>
  <div>
      <div class="tabbar" v-if="isTab">
        <div class="item" v-for="(item,index) in list" @click="change(item)" :key="index">
          <div>
            <img v-if="active===item.id && index !==2" :src="item.imgAct" alt="">
            <img v-else-if="active !==item.id && index !==2" :src="item.img" alt="">
            <p :class="{active: active===item.id}" v-if="index !==2">{{ item.name }}</p>
          </div>
          <div class="box-center-1" v-if="index===2">
            <img src="@/assets/images/ICON-buy.png" alt="">
            <p class="names">{{item.name}}</p>
          </div>
        </div>

      </div>
  </div>

</template>

<script>
  export default {
    data(){
      return{
        active:1,
        isTab:false,
        list:[
          {id:1,
            name:this.$t('Home'),
            img:require('@/assets/images/h.png'),
            imgAct:require('@/assets/images/h1.png'),
            path:'/'
          },
          {
            id:2,
            name:this.$t('Invest'),
            img:require('@/assets/images/c.png'),
            imgAct:require('@/assets/images/c1.png'),
            path: '/invest'
          },
          {
            id:5,
            name:this.$t('Buy'),
            img:require('@/assets/images/ICON-buy.png'),
            imgAct:require('@/assets/images/c1.png'),
            path: '/buy'
          },
          {
            id:3,
            name:this.$t('Record'),
            img:require('@/assets/images/e.png'),
            imgAct:require('@/assets/images/e1.png'),
            path: '/record'
          },
          {
            id:4,
            name:this.$t('My'),
            img:require('@/assets/images/d.png'),
            imgAct:require('@/assets/images/d1.png'),
            path: '/my'
          },
        ]
      }
    },
    methods:{
      change(item){
        this.active = item.id
        this.$router.push(item.path).catch(err=>{})
      },

      getRouter(item){
        this.active = item.meta.menu
        this.isTab=item.meta.isTab
      }
    },
    watch:{
      '$route':{
        handler(newValue,oldValue){
          this.getRouter(newValue)
        },
        immediate:true,
        deep:true
      }
    },
    mounted() {
      this.getRouter(this.$route)
    }
  }
</script>

<style scoped lang="scss">
.tabbar{
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  border-radius: 30px 30px 0px 0px;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding: 3%;
  box-sizing: border-box;
  justify-content: space-around;
  .item{
    min-width: 51px;
    height: 60px;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    margin-top: 15px;
    img{
      width: 30px;
      height: 30px;

    }
    .active{
      color: #533df1;
    }
    .box-center-1{
      width: 110px;
      height: 50px;
      text-align: center;
      border-radius:50%;
      background:#F0EEFF;
      img{
        width: 56px;
        height: 60px;
        border-radius: 0px 0px 0px 0px;
        margin-top: -30px;
      }
      .names{
        width: 100%;
        height: 20px;
        font-size: 15px;
        color: #5A4CBB;
        line-height: 20px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-top: -5px;
        font-weight: 600;
      }
    }
  }
}
</style>